<!--
 * @Author: cgl
 * @Date: 2023-07-20 09:36:04
 * @LastEditors: cgl
 * @LastEditTime: 2023-09-12 09:58:04
 * @FilePath: \public-health-emergencies-fed:\新放射\新radiation-hygiene-fe\src\components\Signature1\index.vue
 * @Description:
 *
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved.
-->
<template>
  <div class="container">
    <div
			id="dialog"
      class="signature"
      >
      <el-container>
        <el-aside>
					<div class="select">
						<div class="btn sealtype"
							:class="selectedSealType == item.dictValue && 'selected'"
							v-for="(item, index) in sealTypeList"
							:key="index"
							@click="changeSealType(item.dictValue)">
							{{item.dictLabel}}
						</div>
					</div>
        </el-aside>

        <el-main>
          <div class="pdf-container" ref="container" >
            <div v-for="(item, index) in pdfHTML"
              :key="'container'+ index"
              class="canvas-container"
              :id="`canvas-container${index + 1}`"
            >
              <canvas :id="`canvas${index + 1}`" />
              <DrawBox
                v-for="(box, inde) in (item.boxLists || [])"
                :key="box.id"
                :box="box"
								:canvasInfo="canvasInfo"
								@deleteBox="deleteBox(index, inde)"
								@editBox="editBox(index, inde)"
								@transfer="transfer($event, index, inde)"
								@update="update($event, index, inde)"
								:commonSealTypeDictList="commonSealTypeDictList"
								:scale="scale"
              />
            </div>
          </div>

          <div class="drag">
            <div class="deagBtn">
							<div class="btn-contaniner">
								<el-select
									style="margin-bottom: 10px; width: 90%"
									v-model="selectedPersonType"
									:disabled="selectedSealType != '0'"
									size="small"
									placeholder="请选择">
									<el-option
										v-for="item in personSealList"
										:key="item.dictValue"
										:label="item.dictLabel"
										:value="item.dictValue"
									></el-option>
								</el-select>
							</div>
							<div class="btn-contaniner">
								<span>单页章</span>
								<div id="btn" class="btn"><i class="el-icon-plus"></i>拖拽添加</div>
							</div>
							<div class="btn-contaniner">
								<span>骑缝章</span>
								<div id="btn2" class="btn"><i class="el-icon-plus"></i>拖拽添加</div>
							</div>
            </div>

						<div class="inputList" ref="inputList">
							<div class="input-container" v-for="(item, index) in showInputList" :key="index">
								<span class="index">{{index + 1}}</span>
								<div @click="focus($event, index)" class="btn">{{getTypeName(item)}}</div>
								<i @click="deleteIcon($event, index)" class="el-icon-close"></i>
							</div>
						</div>
          </div>
        </el-main>
      </el-container>
    </div>

		<el-button type="primary" class="submit" size="small" @click="submit()">保存</el-button>
		<!-- 编辑弹框 -->
		<el-dialog
			title="签章参数设置"
			:visible.sync="dialogVisible"
			:close-on-click-modal="false"
			v-dialogDrag="true"
			append-to-body
		>

			<el-form :model="formconfig" ref="formconfig" size="small" label-width="100px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="签章选择">
							<el-input
								v-model="formconfig.name"
								disabled
								placeholder="请选择签章"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div slot="footer">
				<el-button @click="dialogVisible = false">确定</el-button>
			</div>
		</el-dialog>

		<!-- 手写弹框 -->
		<el-dialog
			title="手写签名"
			class="config-dialog"
			:visible.sync="signVisible"
			:close-on-click-modal="false"
			v-dialogDrag="true"
			append-to-body
			width="900px"
		>
			<div v-if="signVisible" id="signSure" class="signSure">
				<canvas class="whiteBord" id="whiteBord">
				</canvas>
				<div class="bottomBtnBox">
						<button class="primaryBtn" id="againWrite">重写</button>
						<button class="primaryBtn activeBtn" id="sureWrite">确定</button>
				</div>
			</div>
		</el-dialog>

  </div>
</template>

<script>
const PDFJS = require("pdfjs-dist");
PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.min");
import DrawBox from './draw.vue'
import {signature} from "./signature";

export default {
  name: "signature",
  components: {
    DrawBox
  },
  data() {
    return {
      pdfDoc: null, // pdfjs 生成的对象
      pdfHTML: [], // pdfjs 生成的对象
      isMove: false,
      dh: 100, // 拖动框宽高(和生成框同大小)---单页章
      dw: 20, // 拖动框宽高(和生成框同大小)---齐缝章
			canvasInfo: {}, /* 当前canvas位置信息 */
			dialogVisible: false,
			formconfig: {},
			inputList: [], /* 总输入框列表 */
			index: 0,
			urlList: [],
			dialogHeaderHeight: null, /* 弹框顶部高度 */
			scale: null,
			signVisible: false,
			imageBase64: null,
			handsW: 210, /* 手写框大小 和拖动框一样 */
			handsH: 70,
			selectedSealType: null,
			cus_commontype: null, /* 单页章类型 */
			cus_margintype: null, /* 骑缝章类型 */
			personSealList: [], /* 私章类型下拉列表 */
			commonSealType: null, /*  */
			selectedPersonType: null, /*  */
			locateIndex: 0,
    }
  },
  props: {
    sealTypeList: { /* 字典类型 */
      type: Array,
      default: [],
    },
    commonSealTypeDictList: { /* 字典类型 */
      type: Array,
      default: [],
    },
    fileURL: { /* 打开的pdf文件 */
      type: String,
      default: "",
    },
    detailBoxs: { /* 回显的数据 */
      type: Array,
      default: [],
    },
  },
  computed: {
		// 拖动框宽
    dragBoxW() {
      if (this.commonSealType == "1") {
				if(this.selectedSealType == "0") { /* 私章 */
					return 100;
				}else {
					return this.dh;
				}
      }else if (this.commonSealType == "2")  { /* 骑缝章 */
        return this.dw;
      }else if (this.commonSealType == "hands") {
        return this.handsW;
			}
    },
		// 拖动框高
    dragBoxH() {
      if (this.commonSealType == "1") {
				if(this.selectedSealType == "0") { /* 私章 */
					return 50;
				}else {
					return this.dh;
				}
      }else if (this.commonSealType == "2") { /* 骑缝章 */
        return this.dh;
      }else if (this.commonSealType == "hands") {
        return this.handsH;
			}
    },
		// 右侧印章列表
    showInputList() {
			return this.inputList.filter(item => item.sealType == this.selectedSealType)
    },
		// 右侧印章列表名称
		getTypeName() {
			return (value) => {
				let findObj = this.commonSealTypeDictList.find(item => item.dictValue == value.commonSealType)
				if(findObj) {
					if(findObj.dictLabel == "其他") {
						return "单页章"
					}else {
						return findObj.dictLabel;
					}
				}else {
					return "单页章"
				}
			}
		}
  },
	created() {
		this.personSealList = this.commonSealTypeDictList.filter(item => item.dictLabel != "其他" && item.dictLabel != "骑缝章") || [];
		this.cus_commontype = this.commonSealTypeDictList.filter(item => item.dictLabel == "其他")[0].dictValue || "1";
		this.cus_margintype = this.commonSealTypeDictList.filter(item => item.dictLabel == "骑缝章")[0].dictValue || "2";
		this.selectedPersonType = this.commonSealTypeDictList.filter(item => item.dictLabel == "检测人")[0].dictValue;
	},
  async mounted() {
    await this.init();
		await this.sleep(1000)
		this.selectedSealType = "1"; /* 默认选择公章 */
		setTimeout(() => {
			let canvasContainer = document.querySelectorAll(`#canvas-container1`)[0];
			let canvas = document.querySelectorAll(`#canvas1`)[0];
			let {clientWidth, clientHeight, offsetLeft, offsetTop} = canvas;
			let bottomHeight = canvasContainer.offsetHeight - canvas.offsetHeight; /* canvas距父元素底部距离 */
			this.canvasInfo = {
				offsetLeft: offsetLeft, /* canvas距父级左边 */
				offsetTop: offsetTop, /* canvas距父级上边 */
				clientWidth: clientWidth, /* canvas内容宽 */
				clientHeight: clientHeight, /* canvas内容高 */
				bottomHeight: bottomHeight, /* canvas距父级下边 */
			}

			let dialogHeader = document.querySelector(".signature_dialog .el-dialog__header")
			this.dialogHeaderHeight = dialogHeader.clientHeight; /* 54 */
			// 坐标回显
			this.detailBoxs.forEach(item => {
				let data = {
					commonSealType: item.commonSealType,
					sealType: item.sealType,
					pageNumber: item.pageNumber,
					position: {
						position_x: item.xaxis * this.scale + this.canvasInfo.offsetLeft,
						position_y: item.yaxis * this.scale + this.canvasInfo.offsetTop,
					},
					id: 0,
					signId: item.signId, /* 新增的回传属性 */
				};
				this.insertBox(data, true)
			});
			this.$nextTick(() => {
				this.changeColor();
			})
		}, 0);

		this.$nextTick(() => {
			var btn = document.getElementById("btn");
			btn.onmousedown = (e) => {
				this.bind(e, "1");
			}
			var btn2 = document.getElementById("btn2");
			btn2.onmousedown = (e) => {
				this.bind(e, "2");
			}
		})
  },
  methods: {
		// 绑定鼠标按下事件
		bind(mouseE, commonSealType) {
			let _this = this;
			_this.commonSealType = commonSealType;
			let {clientX, clientY, offsetX, offsetY} = mouseE /* 鼠标距最大视口距离 */
			let {dragBoxH, dragBoxW} = _this;
			var dialog = document.getElementById("dialog");
			if (commonSealType == "hands") {
				var creatDiv = document.createElement("img");
				let style = {
					width: `${dragBoxW}px`,
					height: `${dragBoxH}px`,
					position: "absolute",
					left: clientX - offsetX +"px",
					top: clientY - offsetY +"px",
					border: "1px solid #999",
				}
				Object.assign(creatDiv.style, style)
				creatDiv.id = "creatDiv";
				creatDiv.draggable = false;
				creatDiv.src = _this.imageBase64,
				creatDiv.style.cursor = "pointer";
				dialog.appendChild(creatDiv)
				console.dir(creatDiv);
			} else {
				var creatDiv = document.createElement("div");
				let style = {
					width: `${dragBoxW}px`,
					height: `${dragBoxH}px`,
					backgroundColor: "#ffd86e",
					position: "absolute",
					left: clientX - offsetX +"px",
					top: clientY - offsetY +"px",
					opacity: 0,
				}
				Object.assign(creatDiv.style, style)
				creatDiv.id = "creatDiv";
				creatDiv.style.cursor = "pointer";
				dialog.appendChild(creatDiv)
			}
			let enterX = clientX;
			let enterY = clientY;
			// 拖动事件
			document.onmousemove = function (e) {
				// 拖动的距离
				let disX = e.clientX - enterX;
				let disY = e.clientY - enterY;
				if(Math.abs(disX) >= 20 || Math.abs(disY) >= 20) {
					creatDiv.style.opacity = 1;
				}
				let {clientX, clientY} = e /* 鼠标距最大视口距离 */
				var dialog = document.getElementById("dialog");
				if(clientX - offsetX < 0) {
					creatDiv.style.left = "0";
				}else if(clientX - offsetX + dragBoxW > dialog.clientWidth) {
					creatDiv.style.left = dialog.clientWidth - dragBoxW + "px";
				}else {
					creatDiv.style.left = clientX - offsetX + "px";
				}

				if(clientY - offsetY < _this.dialogHeaderHeight) {
					creatDiv.style.top = _this.dialogHeaderHeight + "px";
				}else if(clientY - offsetY +  dragBoxH - _this.dialogHeaderHeight > dialog.clientHeight) {
					creatDiv.style.top = dialog.clientHeight - dragBoxH + _this.dialogHeaderHeight + "px";
				}else {
					creatDiv.style.top = clientY - offsetY + "px";
				}

			};
			// 松开事件
			document.onmouseup = function (e) {
				document.onmousemove = null;
				document.onmouseup = null;
				creatDiv.remove();
				if (creatDiv.style.opacity == 0) {
					return;
				}
				let {clientX, clientY} = e /* 鼠标距最大视口距离 */
				let canvasContainerH = document.querySelectorAll(`#canvas-container1`)[0].offsetHeight /* canvascontainer高度包含边框 */
				let scrollTop = _this.$refs.container.scrollTop;
				let borderTop;
				if(clientY - offsetY < _this.dialogHeaderHeight) { /* 上方越界 */
					borderTop = scrollTop;
				}else if(clientY - offsetY + dragBoxH - _this.dialogHeaderHeight > dialog.clientHeight) {  /* 下方越界 */
					borderTop = scrollTop + dialog.clientHeight - dragBoxH;
				}else {
					borderTop = scrollTop + clientY - _this.dialogHeaderHeight - offsetY;
				}
				let num = Math.ceil(borderTop / canvasContainerH);
				if(borderTop % canvasContainerH == 0) { /* 刚好贴顶部 应为当前张 */
					num ++;
				}
				let {clientWidth, clientHeight, offsetLeft, offsetTop} = _this.canvasInfo; /* canvas距父级元素距离 */
				let data = {
					sealType: _this.selectedSealType,
					pageNumber: num,
					position: {
						position_x: 0,
						position_y: 0,
					},
					id: 0,
				};
				if(commonSealType == "2") {
					data.commonSealType = "2";
				}else if(_this.selectedSealType == "0") {
					data.commonSealType = _this.selectedPersonType;
				}else {
					data.commonSealType = "1";
				}
				if (clientX - offsetX <= 300 + offsetLeft) {
					data.position.position_x = offsetLeft + dragBoxW / 2;
				}else if (clientX - offsetX + dragBoxW >= 300 + offsetLeft + clientWidth) {
					data.position.position_x = offsetLeft + clientWidth - dragBoxW / 2;
				}else {
					data.position.position_x = clientX - 300 - offsetX + dragBoxW / 2;
				}
				if(borderTop % canvasContainerH > clientHeight - dragBoxH) {
					data.position.position_y = clientHeight - dragBoxH / 2;
				}else {
					data.position.position_y = borderTop % canvasContainerH + dragBoxH / 2;
				}
				if(data.pageNumber == 0) {
					data.pageNumber = 1;
				}
				_this.insertBox(data)
			};
		},
		// 渲染页面
    async init() {
			let fileUrl = this.fileURL;
			let _this = this;
			try {
				let fileContent = await PDFJS.getDocument(fileUrl)
				_this.pdfDoc = fileContent;
				// 请求数据
				_this.pdfHTML = Array.from(new Array(fileContent.numPages)).reduce((pre, cur, index) => {
					let obj = {
						boxLists: []
					}
					pre.push(obj)
					return pre
				}, []);

				_this.$nextTick(() => {
					_this.renderPage(fileContent.numPages);
				})
			} catch (error) {
				console.log(error)
			}
    },
    renderPage(nums) {
      for (let item = 1; item <= nums; item++) {
				// 获取页面canvas节点
				let canvas = document.getElementById(`canvas${item}`);
				let pdfContainer = document.querySelector(`.pdf-container`);
				// 获取上下文
				const ctx = canvas.getContext("2d");
				ctx.scale(2, 2);
				// 获取每一页的内容
				this.pdfDoc.getPage(item).then(page => {
					// 文件页面的视图 1倍
					let scale = (pdfContainer.offsetWidth - 50) / page.getViewport(1).width;
					this.scale = scale.toFixed(3);
					this.oripageWidth = page.getViewport(1).width;
					const viewport = page.getViewport(scale);
					// 将画布宽度设置为视图宽度
					canvas.width = viewport.width;
					canvas.height = viewport.height;
					console.dir( canvas);
					const renderContext = {
						canvasContext: ctx,
						viewport: viewport
					};
					// 渲染页面内容：参数是canvas画布上下文，以及文件视图
					let a = page.render(renderContext);
				});
      }
    },
		// 插入方块
    insertBox(data, isdetail) {
			let {commonSealType, sealType, pageNumber, position, id, signId} = data;
      let addBox = {
        commonSealType,
				sealType,
				pageNumber,
        position,
				id,
				transferInfo: {},
				code: 0,
				signId,
      }
			if(pageNumber == 1) { /* permitTo: 1向上 2向下 3两者都可 */
				addBox.transferInfo.permitTo = 2;
			}
			if(pageNumber == this.pdfHTML.length) {
				addBox.transferInfo.permitTo = 1;
			}
			if (commonSealType == "2") {
				let code = this.randomId() + pageNumber;
				this.pdfHTML.forEach((page, index) => {
					if (index < pageNumber - 1) return;
					let copyAddBox = {...addBox};
					copyAddBox.pageNumber = index + 1;
					copyAddBox.id =  this.randomId() + (index + 1);
					copyAddBox.code = code;
					copyAddBox.sealType = "1";
					page.boxLists.push(copyAddBox);
					if (index == pageNumber - 1) {
						this.inputList.push(copyAddBox)
					}
					this.$nextTick(() => {
						let boxDom = document.querySelector(`#${copyAddBox.id} .box`);
						if(this.selectedSealType != "1") { /* 选的不是公章 变暗 */
							boxDom.style.backgroundColor = "#7a8792";
							boxDom.style.color = "#fff";
						}
					})
				});
			}else if(commonSealType == "hands") {
				addBox.id = this.randomId() + pageNumber;
				addBox.img = this.imageBase64;
				addBox.sealType = "0";
				this.inputList.push(addBox)
				this.pdfHTML[pageNumber - 1].boxLists.push(addBox)
			}else {
				this.inputList.push(addBox)
				addBox.id = this.randomId() + pageNumber;
				this.pdfHTML[pageNumber - 1].boxLists.push(addBox)
			}
			this.$nextTick(() => {
				this.changeColor();
				if(!isdetail) {
					this.$refs.inputList.scrollTop = 999;
				}
			})
    },
		// 生成随机id
		randomId() {
			return "cusid-" + Date.now() + "" + Math.ceil((Math.random()*(30-10) + 10) * 100000);
		},
		// 删除
		deleteBox(cindex, cinde) {
			let box = this.pdfHTML[cindex].boxLists[cinde];
			if (box.commonSealType == "2") {
				let firstObj = {};
				for (let i = 0; i < this.pdfHTML.length; i++) {
					let findIndex = this.pdfHTML[i].boxLists.findIndex(item => item.code == box.code)
					if (findIndex != -1) {
						firstObj = this.pdfHTML[i].boxLists[findIndex];
						break;
					}
				}
				this.inputList = this.inputList.filter(item => {
					return item.id != firstObj.id
				})
				this.pdfHTML.forEach((page, index) => {
					let findIndex = page.boxLists.findIndex(item => item.code == box.code)
					if(findIndex != -1) {
						page.boxLists.splice(findIndex, 1);
					}
				});
			}else {
				this.inputList = this.inputList.filter(item => {
					return item.id != box.id
				})
				this.pdfHTML[cindex].boxLists.splice(cinde, 1);
			}
		},
		// 编辑
		editBox(index, inde) {
			this.dialogVisible = true;
		},
		// 打开手写签名
		showSign() {
			this.signVisible = true;
			let _this = this;
			this.$nextTick(() => {
				function sureWriteCallback(imageBase64){
					_this.suresign(imageBase64);
				}
				let params = {
						whiteBord:'whiteBord',//canvas标签的id名称
						againWrite:'againWrite',//重写按钮id名
						sureWrite:'sureWrite',//确认按钮id名
						whiteBordPtions:{},//白板的配置项（空对象时取默认值）
						sureWriteCallback,// 签名完成后的回调函数
				}
				signature(params);
			})
		},
		// 签名完成
		suresign(imageBase64) {
			this.signVisible = false;
			if(imageBase64 != "empty") {
				this.$set(this, "imageBase64", imageBase64)
				this.$nextTick(() => {
					// 拖拽内容头部
					const dragDom = document.getElementById('signhandsimg');
					this.handsW = dragDom.offsetWidth;
					this.handsH = dragDom.offsetHeight;
					dragDom.style.cursor = 'move';
					// 按下事件
					dragDom.onmousedown = (e) => {
						this.bind(e, "hands")
					}
				})
			}
		},
		// 穿梭
		transfer(obj, index, inde) {
			let box = this.pdfHTML[index].boxLists[inde];
			let canvas = document.querySelectorAll(`#canvas1`)[0];
			let {clientWidth, clientHeight, offsetLeft, offsetTop} = canvas ;
			if(obj.to == "top") {
				if(index - 1 == 0) {
					obj.permitTo = 2;
				}
				this.pdfHTML[index - 1].boxLists.push({
					commonSealType: box.commonSealType,
					sealType: box.sealType,
					pageNumber: index,
					position: {
						position_x: obj.position_x,
						position_y: clientHeight - obj.height / 2,
					},
					id: box.id,
					signId: box.signId,
					transferInfo: obj,
				});
				this.$nextTick(() => {
					this.changeColor();
				})
				this.inputList.forEach(item => {
					if(item.id == box.id) {
						item.pageNumber = index;
						item.position.position_y = clientHeight - obj.height / 2;
					}
				})
			}else {
				if(index + 1 == this.pdfHTML.length - 1) {
					obj.permitTo = 1;
				}
				this.pdfHTML[index + 1].boxLists.push({
					commonSealType: box.commonSealType,
					sealType: box.sealType,
					pageNumber: index + 2,
					position: {
						position_x: obj.position_x,
						position_y: 0,
					},
					id: box.id,
					signId: box.signId,
					transferInfo: obj,
				});
				this.$nextTick(() => {
					this.changeColor();
				})
				this.inputList.forEach(item => {
					if(item.id == box.id) {
						item.pageNumber = index + 2;
						item.position.position_y = 0;
					}
				})
			}
			this.pdfHTML[index].boxLists.splice(inde, 1);
		},
		// 更新坐标
		update(obj, cindex, cinde) {
			let box = this.pdfHTML[cindex].boxLists[cinde];
			box.position.position_x = obj.position_x
			box.position.position_y = obj.position_y
			this.inputList.forEach(item => { /* 更新inputList */
				if(item.id == box.id) {
					item.position.position_y = obj.position_y;
				}
			})
		},
		// 聚焦输入框
		focus(event, index) {
			let box = this.showInputList[index]
			let dragDom = document.getElementById(box.id);
			if(!dragDom) return;
			dragDom.classList.add("animation");
      setTimeout(() => {
				dragDom.classList.remove("animation");
      }, 600);

			let canvasContainerH = document.querySelectorAll(`#canvas-container1`)[0].offsetHeight /* canvascontainer高度包含边框 */
			let remain =  canvasContainerH * (box.pageNumber - 1) + box.position.position_y -
										dragDom.offsetHeight / 2 - (this.$refs.container.scrollTop + 50 * this.scale);
			const go = () => {
				remain = remain / 2
				this.$refs.container.scrollTop += remain;
				if (Math.abs(remain) < 3) {
					return false
				}
				requestAnimationFrame(go)
			}
			go()
		},
		// 删除输入框
		deleteIcon(event, index) {
			let box = this.showInputList[index]
			let dragDom = document.getElementById(box.id);
			if(!dragDom) return;
			dragDom.__vue__.deleteBox();

		},
		// 点击签章类型
		changeSealType(dictValue) {
			if(dictValue != this.selectedSealType) {
				this.locateIndex = 0;
			}
			this.selectedSealType = dictValue;
			if(this.showInputList.length != 0) {
				this.focus(null, this.locateIndex);
				this.locateIndex ++;
				if(this.locateIndex == this.showInputList.length) {
					this.locateIndex = 0;
				}
			}
			this.changeColor();
		},
		// 变换颜色
		changeColor() {
			this.pdfHTML.forEach((page, index) => {
				page.boxLists.forEach((box, ind) => {
					let boxDom = document.querySelector(`#${box.id} .box`);
					let index = this.showInputList.findIndex(item => {
						if(box.commonSealType == "2") {
							return item.code == box.code;
						}else {
							return item.id == box.id;
						}
					})
					if(index != -1) {
						boxDom.style.backgroundColor = "#ffd86e";
						boxDom.style.color = "#2d2d2d";
					}else {
						boxDom.style.backgroundColor = "#7a8792";
						boxDom.style.color = "#fff";
					}
				})
			})
		},
		// 提交
		submit() {
			let arr = [];
			let codeList = [];
			this.pdfHTML.forEach(item => {
				item.boxLists.forEach(it => {
					let {pageNumber, signId, commonSealType, sealType, position} = it;
					console.log("原坐标position", it.position.position_x, it.position.position_y);
					let form = {
						xaxis: (position.position_x - this.canvasInfo.offsetLeft) / this.scale,
						yaxis: (position.position_y - this.canvasInfo.offsetTop) / this.scale,
						pageNumber,
						signId,
						commonSealType,
						sealType,
					}
					if(it.commonSealType == "2") { /* 骑缝章为公章 */
						form.xaxis = this.oripageWidth - 4 * this.scale;
						if(codeList.indexOf(it.code) == -1) {
							codeList.push(it.code);
							arr.push(form);
						}
					}else {
						arr.push(form);
					}
				})
			})
			if(arr.length == 0) {
				this.$modal.msgWarning("没有可签署的签章");
				return;
			}
			this.$emit("submit", arr)
		}
  }
}
</script>
<style lang="scss" scoped>
  .signature {
		.el-container {
			height: 100%;
			.el-aside,.el-main {
				padding: 0;
				margin: 0;
			}
			.el-main {
				display: flex;
				.pdf-container {
					display: flex;
					flex-direction: column;
					width: 100%;
					height: calc(100vh - 54px);
					overflow: auto;
					background-color: #d6d6d6;
					&::-webkit-scrollbar-track-piece {
						background: #d3dce6;
					}
					&::-webkit-scrollbar {
						width: 6px;
					}
					&::-webkit-scrollbar-thumb {
						background: #99a9bf;
						border-radius: 20px;
					}
					.canvas-container {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						margin: 0 auto;
						flex-direction: column;
						padding-bottom: 16px;
						border-top: 1px solid #000;
						.signature-box {
							position: absolute;
							.sigin-page {
								width: 120px;
								height: 120px;
							}
							.crevice {
								width: 20px;
								height: 120px;
							}
						}
					}
				}
				.drag {
					// width: 20%;
					width: 300px;
					padding: 15px;
					display: flex;
					flex-direction: column;
					position: relative;
					.deagBtn {
						margin-top: 20px;
						margin-bottom: 20px;
						border-bottom: 1px solid #e5e5e5;
						padding-bottom: 10px;
						padding-left: 25px;
						color: #000;
						.btn-contaniner {
							display: flex;
							align-items: baseline;
						}
					}
					.inputList{
						overflow: auto;
						height: 600px;
						&::-webkit-scrollbar-track-piece {
							background: #d3dce6;
						}
						&::-webkit-scrollbar {
							width: 6px;
						}
						&::-webkit-scrollbar-thumb {
							background: #99a9bf;
							border-radius: 20px;
						}
						.input-container {
							padding-left: 10px;
							margin-bottom: 10px;
							display: flex;
							align-items: center;
							input {
								width: 70%;
								margin-bottom: 10px;
								padding: 3px;
							}
							.index {
								flex: 0.5;
								text-align: center;
							}
							.btn {
								width: 70%;
								margin-bottom: 0;
								margin-right: 5px;
								padding: 3px;
							}
							i {
								font-weight: bolder;
								// color: #0d3d88;
								color: #0d098d;
								cursor: pointer;
							}
						}
					}
				}
			}
		}
  }
	.btn {
		display: inline-block;
		padding: 5px 12px;
		margin-bottom: 20px;
		margin-left: 5px;
		width: 100px;
		font-size: 13px;
		font-weight: normal;
		line-height: 1.53846154;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		cursor: pointer;
		user-select: none;
		border: 1px solid transparent;
		border-radius: 4px;
		transition: .4s cubic-bezier(.175, .885, .32, 1);
		transition-property: background, border, box-shadow, outline, opacity;
		color: #000;
		background-color: #f2f2f2;
		border-color: #bfbfbf;
		i {
			font-weight: bolder;
			margin-right: 3px;
		}
		&:hover {
			background-color: #dedede;
			border-color: #a1a1a1;
			box-shadow: 0 2px 1px rgba(0, 0, 0, .1);
		}
		&:active {
			background-color: #ccc;
			background-image: none;
			border-color: #a6a6a6;
			box-shadow: inset 0 4px 6px rgba(0, 0, 0, .15);
		}

	}
	.submit {
		position: absolute;
		top: 12px;
		right: 90px;
		padding-inline: 30px;
		background-color: #0dbaff;
		border-color: #0dbaff;

	}
	.select {
		margin-top: 20px;
		display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
		.label{
			float: left;
			margin-left: 20px;
		}
		.sealtype {
			display: block;
			margin-block: 10px;
		}
		.selected {
			background-color: #0dbaff;
			border-color: #0dbaff;
			box-shadow: 0 2px 1px rgba(0, 0, 0, .1);
			color: #fff;
			&:active {
				background-color: #18a9e2;
				background-image: none;
				border-color: #18a9e2;
				box-shadow: inset 0 4px 6px rgba(0, 0, 0, .15);
			}
		}
	}
	.signhands {
		margin: 50px auto 10px 35px;
		display: block;
		// background-color: #0dbaff;
		// border-color: #0dbaff;
	}
	.signhandsimg {
		margin: 10px auto;
		display: block;
		border: 1px solid #999;
	}

	.signSure{
		border-radius: 16px;
		padding: 0 12px 28px 12px;
		.topTitle{
			margin: 20px 0 12px 12px;
			font-size: 16px;
		}
		.whiteBord{
			width: 100%;
			height: 300px;
			border: 1px solid #eee;
			background: #f6f6f6;
			background: #f6f6f6;
			margin: 0 auto;
			border-radius: 4px;
			margin-bottom: 12px;
		}
		.bottomBtnBox{
			padding: 0 7px;
			display: flex;
			justify-content: space-between;
			.primaryBtn{
				width: 48%;
				height: 40px;
				color: #666;
				border: 1px solid #ccc;
				border-radius: 4px;
				background: #fff;
				cursor: pointer;
				transition: .4s cubic-bezier(.175, .885, .32, 1);
				transition-property: background, border, box-shadow, outline, opacity;

				&:hover {
					background-color: #dedede;
					border-color: #a1a1a1;
					box-shadow: 0 2px 1px rgba(0, 0, 0, .1);
				}
			}
			.activeBtn{
				background: #2A72EE;
				color: #fff;
				border: none;
				&:hover {
					background-color: #46a6ff;
				}
			}
		}
	}
</style>
